<style lang='scss' scoped>
@import '@css/style.scss';
.buy-page{
  position:absolute;
  height: 100%;
  width: 100%;
  background-color: $bgColor;
  &-content{
    overflow: hidden;
    height: 100%;
    // 商品
    &-goods{
      background-color: #fff;
      padding: $marginSize;
      display: flex;
      border-bottom: px2rem(1) solid $lineColor;
      border-top: px2rem(1) solid $lineColor;
      margin-top: $marginSize;

      &-img{
        width: px2rem(100);
        height: px2rem(100);

      }
      &-desc{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 $marginSize;
        &-name{
          font-size: $infoSize;
          line-height: px2rem(18);
        }
        &-price{
          font-size: $titleSize;
          color: $mainColor;
          font-weight: 500;
        }
      }
    }

    //支付方式
    &-list{
      margin-top: $marginSize;
      &-item{
        display: flex;
        background-color: #fff;
        border-bottom: px2rem(1) solid $lineColor;
        padding: $marginSize;
        align-items: center;
        &-icon{
          height: px2rem(30);
        }
        &-desc{
          margin-left: px2rem(12);
          flex-grow: 1;

          &-name{
            font-size: $infoSize;

          }
          &-desc{
            font-size: $minInfoSize;
            margin-top: px2rem(6);
            color: #666;
          }
        }
        &-check{
          width: px2rem(16);
          height: px2rem(16);
        }
      }
    }
  }
  //立即支付
  .pay{
    position: absolute;
    bottom: px2rem(52);
  }
}
</style>
<template>
  <div class="buy-page">
    <navigation-bar :pageName="`立即购买`" @onLeftClick="onBackClick"></navigation-bar>
    <!-- 内容区域 -->
    <div class="buy-page-content">
      <!-- 购买的商品 -->
      <div class="buy-page-content-goods">
        <!-- 商品图片 -->
        <img class="buy-page-content-goods-img" :src="goodsData.img" alt="">
        <!-- 商品描述 -->
        <div class="buy-page-content-goods-desc">
            <!-- 商品名称 -->
            <p class="buy-page-content-goods-desc-name">{{goodsData.name}}</p>
            <!-- 商品价格 -->
            <p class="buy-page-content-goods-desc-price">{{goodsData.price|priceValue}}</p>
        </div>
      </div>
      <!-- 支付方式 -->
      <ul class="buy-page-content-list">
        <li class="buy-page-content-list-item" v-for="(item,index) in paymentDatas" :key="index" @click="onPaymentItemClick(item)">
          <!-- 支付方式图标 -->
          <img class="buy-page-content-list-item-icon" :src="item.icon" alt="">
          <!-- 描述 -->
          <div class="buy-page-content-list-item-desc">
            <p class="buy-page-content-list-item-desc-name">{{item.name}}</p>
            <p class="buy-page-content-list-item-desc-desc">{{item.desc}}</p>
          </div>
          <!-- 选中支付方式 -->
          <img class="buy-page-content-list-item-check" :src="getCheckIcon(selectPayment.id===item.id)" alt="">
        </li>
      </ul>
    </div>
    <!-- 立即购买 -->
    <div class="pay page-commit">
      立即购买
    </div>
  </div>
</template>
<script>
import NavigationBar from "../components/currency/NavigationBar.vue";
export default {
  components: {
    NavigationBar,
  },
  name: "buy",
  data() {
    return {
      //商品数据
      goodsData: {},
      //支付方式
      paymentDatas: [
        {
          id: "1",
          name: "支付宝支付",
          desc: "数亿用户使用的支付",
          icon: require("@img/alipay.svg"),
        },
        {
          id: "2",
          name: "微信支付",
          desc: "数百亿用户的支付方式",
          icon: require("@img/weichat.png"),
        },
      ],
      //用户选择支付
      selectPayment: {},
    };
  },
  created() {
    this.$http.get("/goods").then((data) => {
      this.goodsData = data.list.find((item) => {
        return item.id == this.$route.query.goodsId;
      });
    });
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.selectPayment = this.paymentDatas[0];
    },
    onBackClick(){
      this.$router.go(-1);
    },
    //支付方式
    onPaymentItemClick(item){
      this.selectPayment=item;
    },
    //返回支付方式
    getCheckIcon(isCheck){
      return isCheck?require('@img/check.svg'):require('@img/no-check.svg');
    }
  },
  computed: {},
};
</script>